$breakpoints: (
    'xxl': 'only screen and ( max-width: 1400px)',
    'xl': 'only screen and ( max-width: 1200px)', //PC
    'lg': 'only screen and ( max-width: 992px)', //手机端
    'md': 'only screen and ( max-width: 768px)',
    'sm': 'only screen and ( max-width: 576px)',
    'xs': 'only screen and ( max-width: 0px)',
    ) !default;

// 带主题的适配
@mixin responsive-theme($breakpoint) {
    $query: map-get($breakpoints, $breakpoint);

    // @if not $query {
    //     @error 'No value found for `#{$breakpoint}`. Please make sure it is 
    //     defined in `$breakpoints` map.';
    // }
    @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
        @include theme {
            @content;
        }
    }
}

// 不带主题的适配
@mixin responsive($breakpoint) {
    $query: map-get($breakpoints, $breakpoint);
    @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
        @content;
    }
}